<template>
  <div>
    <n-grid :x-gap="24">
      <n-grid-item span="24">
        <n-form :model="sdTxt2ImgPrompt" :rules="rules" ref="formRef">
         <n-form-item label="正向提示词" path="prompt">
            <n-input v-model:value="sdTxt2ImgPrompt.prompt" style="height: 100px" type="textarea" placeholder="请输入预设正向提示词" />
            <n-button type="info" style="margin-left: 15px;height: 100px;" @click="promptTemplateShow = true">提示词库</n-button>
         </n-form-item>
         <n-form-item label="反向提示词" path="negativePrompt">
            <n-input placeholder="请输入反向提示词"  type="textarea" v-model:value="sdTxt2ImgPrompt.negativePrompt" />
         </n-form-item>
            <n-row>
                <n-col :span="8">
                    <n-form-item label="随机种子" path="seed">
                        <n-input-number v-model:value="sdTxt2ImgPrompt.seed" />
                        <n-button type="primary" @click="sdTxt2ImgPrompt.seed = Math.round(Math.random() * 1000000)">随机</n-button>
                    </n-form-item>
                </n-col>
                <n-col :span="8">
                  <n-form-item label="采样器" path="samplerName">
                      <n-select
                          :options="samperOptions"
                          v-model:value="sdTxt2ImgPrompt.samplerName"
                          placeholder="请选择"
                          style="width: 100%;margin-left: 10px;"
                      />
                  </n-form-item>
                </n-col>
                <n-col :span="8">

                  <n-form-item label="调度类型" path="scheduler">
                    <n-select
                        :options="schdulerOptions"
                        v-model:value="sdTxt2ImgPrompt.scheduler"
                        placeholder="请选择"
                        style="width: 100%;margin-left: 10px;"
                    />
                  </n-form-item>

                </n-col>
            </n-row>
            <n-row>
              <n-col :span="8">
                <n-form-item label="采样迭代步数" path="defaultSteps">
                  <n-input-number v-model:value="sdTxt2ImgPrompt.steps" style="width: 100%"/>
                </n-form-item>
              </n-col>
                <n-col :span="8">
                    <n-form-item label="提示词相关度" path="defaultCfgScale"  >
                        <n-input-number v-model:value="sdTxt2ImgPrompt.cfgScale" style="width: 100%;margin-left: 10px;" />
                    </n-form-item>
                </n-col>
                <n-col :span="8">
                    <n-form-item label="批次数量" path="defaultBatchSize">
                        <n-input-number v-model:value="sdTxt2ImgPrompt.batchSize" style="width: 100%;margin-left: 10px;" />
                    </n-form-item>
                </n-col>
            </n-row>
            <n-form-item label="尺寸设置" path="sizeOption">
                <n-select
                    :options="imageSizeOption"
                    v-model:value="defaultSizeOption"
                    @update:value="setSizeOption"
                />
            </n-form-item>
            <n-form-item label="详细尺寸" path="width" v-if="defaultSizeOption==='6'" >
                <n-input-number v-model:value="sdTxt2ImgPrompt.height" style="width: 50%; ">
                    <template #prefix>
                        高度
                    </template>
                </n-input-number>
                <n-input-number v-model:value="sdTxt2ImgPrompt.width" style="width: 50%;margin-left: 10px;">
                    <template #prefix>
                        长度
                    </template>
                </n-input-number>
            </n-form-item>
            <n-form-item :show-label="false" path="defaultRestoreFaces">
                <n-checkbox v-model:checked="sdTxt2ImgPrompt.restoreFaces" >
                  ADetailer脸部修复
                </n-checkbox>
                <n-checkbox v-model:checked="sdTxt2ImgPrompt.enableHr">
                    高清修复
                </n-checkbox>
            </n-form-item>
            <n-card v-if="sdTxt2ImgPrompt.enableHr"  :content-style="{padding: '10px 10px 10px 10px'}">
                <n-row>
                    <n-col :span="13">
                        <n-form-item v-if="sdTxt2ImgPrompt.enableHr" label="方法算法" path="defaultHrUpscaler">
                            <n-select v-model:value="sdTxt2ImgPrompt.hrUpscaler" :options="hrUpscalerOptions">
                            </n-select>
                        </n-form-item>
                    </n-col>
                    <n-col :span="1"></n-col>
                    <n-col :span="10">
                        <n-form-item v-if="sdTxt2ImgPrompt.enableHr" label="采样步数" path="defaultHrSecondPassSteps">
                            <n-input-number v-model:value="sdTxt2ImgPrompt.hrSecondPassSteps" :min="1" :max="150" :step="1"/>
                        </n-form-item>
                    </n-col>
                </n-row>
                <n-row>
                    <n-col :span="13">
                        <n-form-item v-if="sdTxt2ImgPrompt.enableHr" label="重绘幅度" path="defaultDenoisingStrength">
                            <n-input-number
                                v-model:value="sdTxt2ImgPrompt.denoisingStrength"
                                style="width: 100%"
                                :min="0"
                                :max="1.0"
                                :step="0.01"/>
                        </n-form-item>
                    </n-col>
                    <n-col :span="1"></n-col>
                    <n-col :span="10">
                        <n-form-item v-if="sdTxt2ImgPrompt.enableHr" label="放大倍率" path="defaultHrScale">
                            <n-input-number v-model:value="sdTxt2ImgPrompt.hrScale" :min="1" :max="4" :step="0.05"/>
                        </n-form-item>
                    </n-col>
                </n-row>
            </n-card>
        </n-form>
      </n-grid-item>
    </n-grid>
    <n-drawer v-model:show="promptTemplateShow" :width="promptTemplateWidth">
        <n-drawer-content title="提示词选择器" closable>
          <n-tabs animated type="segment" >
            <n-tab-pane name="tag" tab="标签">
              <promptTemplate :prompt="sdTxt2ImgPrompt.prompt" :negative-prompt="sdTxt2ImgPrompt.negativePrompt" @loadPrompt-event="loadPromptEvent"></promptTemplate>
            </n-tab-pane>
            <n-tab-pane name="pic" tab="照片">
              <pic-template @loadConfig-event="loadConfigEvent"></pic-template>
             </n-tab-pane>
          </n-tabs>
        </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import {h, onMounted, reactive, ref, watch} from 'vue';
import {NAvatar, NText, useMessage} from 'naive-ui';
import {resourceController} from '@/api/resource/resourceController.api'
import {sdControllerApi} from "@/api/sd/sdController.api";
import {promptControllerApi} from '@/api/prompt/prompt.api'
// @ts-ignore
import fileFunction from "@/libs/globalFunction/file";
import promptTemplate from "@/components/prompt/promptTemplate.vue"
import {stableDiffusionDict} from '@/dictionary/stableDiffusionDict'
import PicTemplate from "@/components/prompt/picTemplate.vue";

const formRef: any = ref(null);
const message = useMessage();
const buttonLoading = ref(false)
const promptTemplateShow = ref(false)
const promptTemplateWidth = ref(0)
const picList = ref([])


const props = defineProps({
  defaultSdTxt2ImgPrompt: {
      type: Object,
      default: () => {
          return {}
      }
  },
  samperOptions: {
    type: Array,
    required: true
  },
  schdulerOptions:{
    type: Array,
    required: true
  }
})

watch(props.defaultSdTxt2ImgPrompt, (newVal) => {
    sdTxt2ImgPrompt.prompt = newVal.prompt
    sdTxt2ImgPrompt.negativePrompt = newVal.defaultNegativePrompt
    sdTxt2ImgPrompt.seed = newVal.defaultSeed
    sdTxt2ImgPrompt.samplerName = newVal.defaultSamplerName
    sdTxt2ImgPrompt.batchSize = newVal.defaultBatchSize
    sdTxt2ImgPrompt.steps = newVal.defaultSteps
    sdTxt2ImgPrompt.width = newVal.defaultWidth
    sdTxt2ImgPrompt.height = newVal.defaultHeight
    sdTxt2ImgPrompt.promptEn = newVal.promptEn
    sdTxt2ImgPrompt.cfgScale = newVal.defaultCfgScale
    sdTxt2ImgPrompt.savePath = newVal.savePath
    sdTxt2ImgPrompt.restoreFaces = newVal.defaultRestoreFaces
    sdTxt2ImgPrompt.enableHr = newVal.defaultEnableHr
    sdTxt2ImgPrompt.hrUpscaler = newVal.defaultHrUpscaler
    sdTxt2ImgPrompt.hrSecondPassSteps = newVal.defaultHrSecondPassSteps
    sdTxt2ImgPrompt.denoisingStrength = newVal.defaultDenoisingStrength
    sdTxt2ImgPrompt.hrScale = newVal.defaultHrScale

},{ deep: true })

const paintImagUrl = ref("")
const {imageSizeOption,hrUpscalerOptions} = stableDiffusionDict()

const rules = {
  resourceId: {
    required: true,
    message: '请选择资源',
    trigger: 'blur'
  }
};

// 默认sizeOption
const defaultSizeOption = ref('1')

const sdTxt2ImgPrompt : SD.Txt2ImgInput =  reactive({
    prompt: '',
    negativePrompt: '',
    seed: -1,
    samplerName: 'DPM++ 2M',
    batchSize: 1,
    steps: 20,
    width: 512,
    height: 512,
    promptEn: '',
    cfgScale: 7,
    savePath: '',
    restoreFaces : false,
    enableHr: false,
    hrUpscaler: 'R-ESRGAN 4x+',
    hrScale: 2.0,
    denoisingStrength: 0.5,
    hrSecondPassSteps: 8,
    sdResourceId:'',
    scheduler: 'Automatic'
});

const setSizeOption = (sizeOption:any) =>{
    console.log(sizeOption)
    if(sizeOption==="1"){
        sdTxt2ImgPrompt.width = 512
        sdTxt2ImgPrompt.height = 512
    }else if(sizeOption ==="2"){
        sdTxt2ImgPrompt.height = 768
        sdTxt2ImgPrompt.width = 512
    }else if(sizeOption==="3"){
        sdTxt2ImgPrompt.height = 512
        sdTxt2ImgPrompt.width = 768
    }else if(sizeOption==="4"){
        sdTxt2ImgPrompt.height = 1024
        sdTxt2ImgPrompt.width = 768
    }else if (sizeOption==="5") {
        sdTxt2ImgPrompt.height = 768
        sdTxt2ImgPrompt.width = 1024
    }
}

const loadPromptEvent = (prompt:string,negativePrompt:string) => {
    sdTxt2ImgPrompt.prompt = prompt;
    sdTxt2ImgPrompt.negativePrompt = negativePrompt;
    promptTemplateShow.value = false;
}

const loadConfigEvent = (metaObj : any) =>{
  console.log(metaObj)
  promptTemplateShow.value = false;
  sdTxt2ImgPrompt.prompt = metaObj.prompt;
  sdTxt2ImgPrompt.negativePrompt = metaObj.negativePrompt
  sdTxt2ImgPrompt.cfgScale = metaObj.cfgScale
  sdTxt2ImgPrompt.steps = metaObj.steps
  sdTxt2ImgPrompt.seed = metaObj.seed
  sdTxt2ImgPrompt.samplerName = metaObj.sampler
  defaultSizeOption.value = '6'
  const sizeMeta = metaObj.Size.split('x')
  sdTxt2ImgPrompt.height = sizeMeta[1]
  sdTxt2ImgPrompt.width = sizeMeta[0]
  if(metaObj["Hires upscaler"]){
    sdTxt2ImgPrompt.enableHr = true
    sdTxt2ImgPrompt.hrUpscaler = metaObj["Hires upscaler"]
    sdTxt2ImgPrompt.hrScale = metaObj["Hires upscale"]
    sdTxt2ImgPrompt.hrSecondPassSteps = metaObj["Hires steps"]
    sdTxt2ImgPrompt.denoisingStrength = metaObj["Denoising strength"]
  }
}







onMounted(() => {
    // 设置当前drawerWidth 宽度
  promptTemplateWidth.value = window.innerWidth - 300;
  window.addEventListener('resize', handleResize);
});
// 窗口宽度变化
const handleResize = () => {
    promptTemplateWidth.value = window.innerWidth - 300;
}

const getTxt2ImgPrompt = () =>{
    return sdTxt2ImgPrompt
}

const addPrompt = (prompt:string, which: number) =>{
    if(which == -1){
        sdTxt2ImgPrompt.negativePrompt = sdTxt2ImgPrompt.negativePrompt + "," + prompt
    }else {
        sdTxt2ImgPrompt.prompt = sdTxt2ImgPrompt.prompt + "," + prompt
    }
}

defineExpose({
    getTxt2ImgPrompt,addPrompt
})


</script>

